<template>
  <div>
    <h1>预定管理</h1>
    <el-card class="mt-10" shadow="hover">
      <el-row align="middle">
        <el-col :span="20" class="flex-c" style="flex-wrap: wrap">
          <div class="flex-c">
            <span>预定人:</span>
            <el-input v-model="params.username" style="flex: 1" class="ml-10" clearable />
          </div>
          <div class="ml-20 flex-c">
            <span>会议室名称:</span>
            <el-input v-model="params.meetingRoomName" style="flex: 1" class="ml-10" clearable />
          </div>
          <div class="ml-20 flex-c">
            <span>位置:</span>
            <el-input
              v-model="params.meetingRoomPosition"
              style="flex: 1"
              class="ml-10"
              clearable
            />
          </div>
          <div class="flex-c ml-10">
            <span>审批状态:</span>
            <el-select
              v-model="params.status"
              placeholder="Select"
              size="large"
              style="width: 120px"
              class="ml-10"
            >
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div class="mt-15">
            <span>预定开始日期:</span>
            <el-date-picker
              v-model="datetimeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="预定开始时间"
              end-placeholder="预定结束时间"
              style="width: 340px"
              class="ml-10"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="querySearch">查询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mt-15" shadow="hover">
      <div class="f-bold f-18">预定列表</div>
      <el-table :data="tableData" stripe style="width: 100%" class="mt-10" border>
        <el-table-column label="会议室名称" width="180">
          <template #default="scope">
            <div>{{ (scope.row as RowData).room.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="meetingRoomPosition" label="会议室位置" width="180">
          <template #default="scope">
            <div>{{ (scope.row as RowData).room.location }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="预定人">
          <template #default="{ row }">
            <div>{{ (row as RowData).user.username }}</div>
          </template>
        </el-table-column>
        <el-table-column label="开始时间">
          <template #default="{ row }">
            <div>
              {{ dayjs(new Date((row as RowData).startTime)).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间">
          <template #default="{ row }">
            <div>
              {{ dayjs(new Date((row as RowData).endTime)).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审批状态">
          <template #default="{ row }">
            <div>{{ BookingStatus[(row as RowData).status] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="预定时间">
          <template #default="{ row }">
            <div>
              {{ dayjs(new Date((row as RowData).createTime)).format('YYYY-MM-DD hh:mm:ss') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" />
        <el-table-column prop="action" label="操作" width="200">
          <template #default="{ row }">
            <el-popconfirm
              title="是否通过?"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="changeStatus('apply', row.id)"
            >
              <template #reference>
                <el-button type="primary" size="small">通过</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              title="是否驳回?"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="changeStatus('reject', row.id)"
            >
              <template #reference>
                <el-button type="warning" size="small">驳回</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              title="是否解绑?"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="changeStatus('unbind', row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small">解绑</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row justify="end" class="mt-15">
        <el-pagination
          background
          layout="prev, pager, next,total"
          :total="total"
          v-model:page-size="params.pageSize"
          v-model:current-page="params.pageNo"
          @change="changePage"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { IMeetingRoomResult } from '../meetingRoomManage/index.vue'
import type { IUserTable } from '../userManage/index.vue'
import { getBookingList, apply, reject, unbind } from '@/api'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'bookingManage'
})

enum BookingStatus {
  '申请中' = 1, // 申请中
  '审批通过', // 审批通过
  '审批驳回', // 审批驳回
  '已解除' // 解除
}

/** 生命周期 */
onMounted(() => {
  search()
})

/** 搜索相关 */
const datetimeRange = ref<Array<Date>>([])
const statusList = ref<Record<string, string>[]>([
  {
    label: '全部',
    value: ''
  },
  {
    label: '申请中',
    value: '1'
  },
  {
    label: '审批通过',
    value: '2'
  },
  {
    label: '审批驳回',
    value: '3'
  },
  {
    label: '已解除',
    value: '4'
  }
])
export interface SearchBookingList {
  username: string
  meetingRoomName: string
  meetingRoomPosition: string
  status: string
  pageNo: number
  pageSize: number
}
const params = reactive<SearchBookingList>({
  username: '',
  meetingRoomName: '',
  meetingRoomPosition: '',
  status: '1',
  pageNo: 1,
  pageSize: 10
})

/** 表格相关 */
export interface IBookingSearchResult {
  id: number
  startTime: string
  endTime: string
  status: number
  note: string
  createTime: string
  updateTime: string
  user: IUserTable
  room: IMeetingRoomResult
}
type RowData = IBookingSearchResult
let tableData = ref<Array<IBookingSearchResult>>([])
let total = ref(0)

/** events */
const querySearch = () => {
  params.pageNo = 1
  search()
}
const search = async () => {
  const condition = {
    ...params,
    bookingTimeRangeStart: datetimeRange.value.length
      ? new Date(datetimeRange.value[0]).valueOf()
      : '',
    bookingTimeRangeEnd: datetimeRange.value.length
      ? new Date(datetimeRange.value[1]).valueOf()
      : ''
  }
  const res = await getBookingList(condition)
  if (res.data.code === 200 || res.data.code === 201) {
    const { list, total: pageTotal } = res.data.data
    tableData.value = list || []
    total.value = pageTotal || 0
  } else {
    ElMessage.error(res.data.data || '系统繁忙,请稍后再试')
  }
}
const changePage = (currentPage: number, pageSize: number) => {
  params.pageNo = currentPage
  params.pageSize = pageSize
  search()
}
const changeStatus = async (status: 'apply' | 'reject' | 'unbind', id: number) => {
  const methods = {
    apply,
    reject,
    unbind
  }
  const res = await methods[status](id)
  if (res.status === 200 || res.status === 201) {
    ElMessage.success('更新成功')
    search()
  }
}
</script>

<style scoped></style>
